<template>
  <div class="divContainer">
    <el-card class="box-card" :size="size" shadow="never">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="24">
            <div class="top">
              <div class="topDiv"><img class="image_3" referrerpolicy="no-referrer" :src="accountIcon"/></div>
              <span class="title-span"> 台账管理</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="bottom" style="height:calc(100% - 20px)">
            <span class="first span">
                <div class="text">
                  <div style="margin-left: -40px;margin-bottom: 30px">
                    <img style="width: 8%;" class="image_3" src="./images/组366.png" alt="">
                    <span style="color: #B6EDEA;">库房</span>
                    <span @click="kfEvent" style="cursor: pointer;font-size: large;margin-left: 35px;">{{
                        kfNum
                      }}</span>

                    <!-- <div style=" margin-left: -40px;margin-top: 5px; font-size: large;margin-top: 4px;"> -->
                    <span style="margin-left:100px; color: #B6EDEA;">所属设备</span>
                    <span style="cursor: pointer;margin-left: 40px;font-size: large" @click="clickEquip">{{
                        kfEquipNum
                      }}</span>
                    <!-- </div>  -->
                </div>
                </div>

            </span>
        <span class="last span">
                <div class="text">
                  <div style="margin-left: -40px;margin-bottom: 30px">

                    <img style="width: 8%;" class="image_3" src="./images/组367.png" alt="">
                    <span>能源站</span>
                    <span style="cursor: pointer;font-size: large;margin-left: 35px;" @click="nyzEvent()">{{
                        nyzNum
                      }}</span>
                    <span style="margin-left:100px; ">所属设备</span>
                    <span @click="nyzEquip()" style="cursor: pointer;margin-left: 40px;font-size: large">{{
                        nyzEquipNum
                      }}</span>
                  </div>
                </div>
            </span>
      </div>
    </el-card>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="false"
               v-dialogDrag append-to-body>
      <iframe width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" :src="iFrameUrl"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {firstPage} from '@/api/firstPage.js'

export default {
  name: "",

  data() {
    return {
      accountIcon: require('./images/wodezhangdan(1).png'),
      size: 'mini',
      kfEquipNum: "",//库房设备数量
      kfNum: '',  //库房数量
      nyzEquipNum: '',//	能源站设备数量
      nyzNum: '',//	能源站数量
      iFrameUrl: '',//iframe地址
      dialogProps: {
        visible: false,
        title: '库房设备',
        width: "90%",
        top: "5px",
      },
    }
  },
  methods: {
    handleClose(done) {
      // this.$confirm("确认关闭？")
      // .then((_) => {

      this.dialogProps.visible = false;
      // })
      // .catch((_) => { });
    },
    //库房
    kfEvent() {
      this.iFrameUrl = GLOBAL_URL.APP_URL + '/sgems//equip/warehouseManagement.html?iscid=BJ-EN-USER-001&JSESSIONID=&type=search'
      // this.iFrameUrl= 'http://localhost:8081/warehouseManagement.html?type=search'
      this.dialogProps.visible = true;
      this.dialogProps.title = '库房查询';
    },
    //能源站
    nyzEvent() {
      this.iFrameUrl = GLOBAL_URL.APP_URL + '/sgems//equip/computerRoomManagement.html?iscid=BJ-EN-USER-001&JSESSIONID=&type=search'
      // this.iFrameUrl= 'http://localhost:8080/computerRoomManagement.html?type=search'
      this.dialogProps.visible = true;
      this.dialogProps.title = '能源站查询';
    },
    //库房设备
    clickEquip() {
      this.iFrameUrl = GLOBAL_URL.APP_URL + '/sgems//equip/accountQuery.html?iscid=BJ-EN-USER-001&JSESSIONID='
      // this.iFrameUrl= 'http://localhost:8081/accountQuery.html'
      this.dialogProps.visible = true;
      this.dialogProps.title = '库房设备';
    },
    //能源站设备
    nyzEquip() {
      console.log("1234")
      this.iFrameUrl = GLOBAL_URL.APP_URL + '/sgems//equip/accountQuery.html?nyz=' + 1
      //  this.iFrameUrl= 'http://localhost:8082/accountQuery.html?nyz='+1
      this.dialogProps.visible = true;
      this.dialogProps.title = '能源站设备';
    },
    getData() {
      //获取信息
      firstPage.getTzgl().then(res => {
        this.kfEquipNum = res.data.kfEquipNum
        this.kfNum = res.data.kfNum
        this.nyzEquipNum = res.data.nyzEquipNum
        this.nyzNum = res.data.nyzNum
      })
    }
  },
  mounted() {
    //获取信息
    this.getData()
    //每1分钟取一次
    setInterval(() => {
      this.getData()
    }, 300000)

  }
}
</script>

<style scoped>
.divContainer {
  width: 100%;
  height: 100%;
  line-height: 35px;
}

.divContainer .el-card {
  border: 0px !important;
  border-radius: 0px;
  margin-bottom: 10px;
  height: 100%;
}

.divContainer .el-card .el-card__body {
  height: 100%;
}

.divContainer .el-card .el-card__header {
  padding: 0px 0px 0px 0px !important;
  border-bottom: none;
}

.divContainer .top {
  /* border-bottom: 1px solid #eee; */
  border-bottom: 1px solid #eee;
  padding-left: 5px;
}


.title-span {
  font-weight: bold;
}

.divContainer .bottom {
  display: flex;
  justify-content: space-between;
}

.divContainer .bottom .span {
  display: inline-block;
  width: 100%;
  height: 100%;

}

.divContainer .bottom .first {
  background-image: url('./images/365.png');
  background-repeat: no-repeat; /*  是否重复   */
  background-position: bottom;
  background-size: 100% 120%;
}

.divContainer .bottom .span .text {
  margin-left: 60px;
  margin-top: 20px;
  color: #fff;
  font-size: inherit;
  font-weight: bold;
}

.divContainer .bottom .last {
  background-image: url('./images/365(1).png');
  background-repeat: no-repeat; /*  是否重复   */
  background-position: bottom;
  background-size: 100% 120%;
}

.el-dialog {
  height: 99%;
}

.el-dialog__body {
  height: 90%;
  padding: 0;
}

.topDiv {
  display: inline-block;
  text-align: center;
  line-height: 35px;
  height: 35px;
  border-bottom: 3px solid #1d8d87;
}

.image_3 {
  vertical-align: middle;
}
</style>
